<template>
    <div class="packaging-detail">
        <a-modal width="900px" :visible="visible" :title="modalOption.title" :dialog-style="{ top: '20px' }"
            @cancel="modalOption.onCancel" class="yuan-modal packaging-detail-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-title">产品信息</div>
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="产品类型">
                                <span class="yuan-form-show">{{ infoData.productType }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="品名">
                                <span class="yuan-form-show">{{ infoData.varietyName }}</span>
                            </a-form-model-item>
<!--                            <a-form-model-item class="yuan-form-item" label="规格码">-->
<!--                                <span class="yuan-form-show">{{ infoData.specificationCode }}</span>-->
<!--                            </a-form-model-item>-->
<!--                            <a-form-model-item class="yuan-form-item" label="存货代码">-->
<!--                                <span class="yuan-form-show">{{ infoData.inventoryCode }}</span>-->
<!--                            </a-form-model-item>-->
                            <a-form-model-item class="yuan-form-item" label="产品批号">
                                <span class="yuan-form-show">{{ infoData.productBatch }}</span>
                            </a-form-model-item>
<!--                            <a-form-model-item class="yuan-form-item" label="发药机编码">-->
<!--                                <span class="yuan-form-show">{{infoData.dispensingMachineCoder}}</span>-->
<!--                            </a-form-model-item>-->
                            <a-form-model-item class="yuan-form-item" label="包装规格">
                                <span class="yuan-form-show">{{infoData.discretion}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="生产日期">
                                <span class="yuan-form-show">{{ infoData.productionTime }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="保质期">
                                <span class="yuan-form-show">{{ infoData.expirationDate }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="投料品名">
                                <span class="yuan-form-show">{{ infoData.feedName }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="生产负责人">
                                <span class="yuan-form-show">{{ infoData.principal }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="投料批号">
                                <span class="yuan-form-show">{{ infoData.productionBatch }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="投入量">
                                <span class="yuan-form-show">{{ infoData.putIntoNum }}kg</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="质量标准">
                                <span class="yuan-form-show">{{ infoData.massStandard }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="产地">
                                <span class="yuan-form-show">{{ infoData.placeOfOrigin }}</span>
                            </a-form-model-item>
                        </div>
                    </div>

                    <div class="form-panel" v-if="!isPreview">
                        <div class="form-panel-title">实际产量调整明细</div>
                        <div class="form-panel-box">
                            <a-table bordered :rowKey="getRowKey" :columns="columns" :data-source="infoData.records"
                                :pagination="false"></a-table>
                        </div>
                    </div>
                    <div class="form-panel" v-if="!isPreview">
                        <div class="form-panel-title">调整投料量明细</div>
                        <div class="form-panel-box">
                            <a-table bordered :rowKey="getRowKey" :columns="columns2" :data-source="inputRecords"
                                     :pagination="false"></a-table>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button :type="isPreview?'':'primary'" @click="modalOption.onCancel">
                    关闭
                </a-button>
                <a-button type="primary" @click="submit" v-if="isPreview">
                    提交
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi, { ProListRes } from "@/api/nextApi";
import Upload from "@/components/upload.vue";
import { h } from "vue";
@Component({
    name: "ProductAdd",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isPreview!: boolean;
    @Prop({ default: "" }) infoData!: any;

    @Watch("visible")
    visibleChange() {
        this.modalOption.title = this.isPreview ? "包装预览" : "包装详情";
        this.getAddInputDetails()
        console.log(this.infoData)
    }
    logList = [{ id: "" }];
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    columns = [
        {
            align: "center",
            dataIndex: "adjustTime",
            key: "adjustTime",
            title: "调整日期",
        },
        {
            align: "center",
            dataIndex: "practicalYield",
            key: "practicalYield",
            title: "实际产量",
        },
        {
            align: "center",
            dataIndex: "adjustPerson",
            key: "adjustPerson",
            title: "调整人",
        },
    ];
    columns2 = [
        {
            align: "center",
            dataIndex: "adjustTime",
            key: "adjustTime",
            title: "调整日期",
        },
        {
            align: "center",
            dataIndex: "num",
            key: "num",
            title: "调整投料量",
        },
        {
            align: "center",
            dataIndex: "setupPerson",
            key: "setupPerson",
            title: "调整人",
        },
    ];
    getRowKey(item: any) {
        return item.id;
    }
    formLoading = false;
    modalOption = {
        title: "包装详情",
        onCancel: this.closeModal,
    };
    async mounted() {
        console.log(this.infoData)
    }
    inputRecords :any = []
    async getAddInputDetails() {
        const res = await nextApi.getAddInputDetail({packagingId:this.infoData.id})
        this.inputRecords = res.data
        console.log(this.inputRecords,'$')
    }
    closeModal() {
        this.$emit("closeModal");
    }
    pageChange() {}
    async submit() {
        this.$emit("submit");
    }
}
</script>
<style lang="scss">
.packaging-detail-modal {
}
</style>
